<template>
  <div class="toast-box" :style="toastStyle">
    <!-- FIX iframe会吞掉mouse事件,修复方法:pointer-events: none -->
    <iframe
      :src="iframeSrc"
      frameborder="0"
      scrolling="no"
      style="pointer-events: none; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: -1; background-color: transparent;"
      allowtransparency="true"
    />
    <p style="margin:0;">{{ content }}</p>
  </div>
</template>

<script>
// https://blog.csdn.net/qq_41422946/article/details/104344246
export default {
  name: 'Toast',
  props: {
    left: {
      type: Number,
      required: false,
      default: 0
    },
    top: {
      type: Number,
      required: false,
      default: 0
    },
    height: {
      type: Number,
      required: false,
      default: 24
    },
    fontSize: {
      type: Number,
      required: false,
      default: 12
    },
    backgroundColor: {
      type: String,
      required: false,
      default: 'transparent'
    },
    color: {
      type: String,
      required: false,
      default: '#000000'
    },
    zIndex: {
      type: Number,
      required: false,
      default: 1
    },
    content: {
      type: String,
      required: true,
      default: ''
    }
  },
  computed: {
    iframeSrc() {
      return `javascript:document.write('
      <html>
        <head>
        <style>
          body { background-color:transparent; margin:0; }
        </style>
        </head>
        <body>
        </body>
      </htm>
      ')`
    },
    toastStyle() {
      return {
        left: `${this.left}px`,
        top: `${this.top}px`,
        zIndex: this.zIndex,
        minHeight: `${this.height - 2}px`,
        lineHeight: `${this.height - 2}px`,
        fontSize: `${this.fontSize}px`,
        backgroundColor: this.backgroundColor,
        color: this.color
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.toast-box {
  white-space: nowrap;
  padding: 1px 0;
  border: none;
  position: absolute;
  box-shadow: none;
  pointer-events: none;
  // 这几个css属性由变量控制!!!
  // min-height: 22px;
  // line-height: 22px;
  // font-size: 12px;
  // background-color: rgb(33, 40, 48);
  // color: #c8c8c8;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}
</style>
